<template>
  <div id="outside">
    <div class="detail">
      <div class="header">
        <a href="">
          <i class="iconfont"></i>
        </a>
        <div class="tabtop">
          <!-- 激活状态 class="active" -->
          <!-- 事件 click-right  click-left -->
          <van-nav-bar
            title="商品"
            left-text="返回"
            left-arrow
            @click-left="back"
          >
            <template #right>
              <van-icon name="chat-o" size="22" />
            </template>
          </van-nav-bar>
          <!-- <ul>
            <li v-for="(item, index) in title" :key="index">
              <a href="">{{ item.name }}</a>
            </li>
          </ul> -->
        </div>
        <a href="">
          <i class="iconfont"></i>
        </a>
        <a href="">
          <i class="iconfont"></i>
        </a>
      </div>
      <div class="main">
        <!-- 商品展示页 -->
        <div class="header_img">
          <van-swipe :autoplay="3000" class="swipes" v-if="banner_img">
            <van-swipe-item v-for="(item, index) in banner_img" :key="index">
              <img v-lazy="item.image" />
            </van-swipe-item>
          </van-swipe>
          <!-- <img src="https://wap.epet.com/goods/142859.html" alt=""> -->
        </div>
        <div class="brand_day">
          <div class="brand_daybg">
            <!-- 左边价格 -->
            <div class="prices">
              <span>￥59.00</span>
              <div class="price_through">
                <span>价格</span><span>￥99.00</span>
              </div>
            </div>
            <div class="brand_left"></div>

            <!-- 右边倒计时 -->
            <div class="brand_right"></div>
            <van-count-down :time="time" class="times">
              <template #default="timeData">
                <span>距离结束还剩:</span>
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </div>
        </div>
        <div class="bgfff" v-if="msg">
          <div class="nation-flag">
            <!-- <img src="" alt=""> -->
          </div>
          <!-- 主标题 -->
          <p class="ro-info_subject" v-if="forMat">
            {{ msg.subject.replace("2kg", forMat) }}
          </p>
          <!-- 子标题 -->
          <p class="ro-info">
            {{ msg.presubject }}
          </p>
          <p class="pro-desc"></p>
        </div>
        <div>
          <div class="margin-div"></div>
        </div>
      </div>
      <!-- 已选规格 -->
      <div class="choose" v-if="forMat">
        <span>已选取</span>
        <span>{{ forMat }}</span>
      </div>
      <div>
        <div class="margin-div"></div>
      </div>
      <!-- 选择规格 -->
      <div class="choose_spe" v-if="def_format.formats">
        <span>规格：</span>
        <van-button
          type="default"
          size="small"
          round
          v-for="(item, index) in def_format.formats[0].option"
          :key="index"
          :class="isCheck == index ? 'active' : ''"
          @click="handleChoose(item, index)"
          >{{ item.name }}</van-button
        >
      </div>
      <div>
        <div class="margin-div"></div>
      </div>
      <!-- 购买数量 -->
      <div class="choose_weight">
        <span>购买数量：</span>
        <van-stepper
          v-model="value"
          theme="round"
          button-size="22"
          disable-input
        />
      </div>

      <!-- 底部 -->
      <div class="button">
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
          <router-link to="/car">
            <van-goods-action-icon
              icon="cart-o"
              text="购物车"
              :badge="info.cartCount"
            />
          </router-link>
          <van-goods-action-icon
            icon="star"
            :text="isCollection ? '已收藏' : '收藏'"
            :color="isCollection ? '#ff5000' : '#ccc'"
            @click="handleCollection"
          />
          <van-goods-action-button
            type="warning"
            @click="handleAdd"
            text="加入购物车"
          />
          <router-link to="/form">
            <van-goods-action-button
              type="danger"
              text="立即购买"
              @click="handleCheckout"
            />
          </router-link>
        </van-goods-action>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";

// 全局注册
Vue.use(Dialog);
import { getGoodData } from "@/api/good.js";
export default {
  props: {
    fixed: true,
  },
  data() {
    return {
      gitem: null,
      time: 30 * 60 * 60 * 1000,
      value: 1,
      title: [],
      banner_img: null, //商品图片
      msg: null, //商品标题
      def_format: {}, //规格
      isCheck: 0,
      forMat: 0, //规格重量
      isCollection: false, // 收藏
      gid: null,
      price: 99.0,
    };
  },
  methods: {
    handleChoose(item, index) {
      //选择规格
      this.isCheck = index;
      this.forMat = item.name;
    },
    handleAdd() {
      //添加购物车
      let { gitem, value, forMat } = this;
      this.$store.commit("gcart/goodAddMut", { gitem, value, forMat }); //forMat选择的规格
    },
    back() {
      this.$router.go(-1);
    },
    handleCollection() {
      //收藏
      this.isCollection = !this.isCollection;
      this.$store.commit("collection/addCollection", {
        gid: this.gid,
        img: this.banner_img[0].image,
        title: this.msg.subject,
        subtitle: this.msg.presubject,
        format: this.forMat,
        price: this.price,
      });
    },
    handleCheckout() {
      //立即购买
      this.$store.commit("collection/nowCheckout", {
        gid: this.gid,
        img: this.banner_img[0].image,
        title: this.msg.subject,
        subtitle: this.msg.presubject,
        format: this.forMat,
        price: this.price,
      });
    },
  },
  computed: {
    info() {
      return this.$store.getters["gcart/info"];
    },
    collectionInfo() {
      return this.$store.state.collection.collectionList;
    },
  },
  mounted() {
    this.collectionInfo.forEach((item) => {
      if (item.gid == this.gid) {
        this.isCollection = true;
      }
    });
  },
  created() {
    // console.log(location);
    let str = location.hash; //获取查询字符串gid
    let num = str.split("/")[2];
    this.gid = num;
    getGoodData(this.gid).then((res) => {
      console.log(res);
      //将获取的字符串并传到 api下的good.js
      //发送请求获取对应gid数据
      this.title = res.data.tabs;
      this.banner_img = res.data.datas[0].photos;
      this.msg = res.data.datas[1];
      this.def_format = res.data.datas[6];
      this.forMat = res.data.datas[6].def_format;
      this.gitem = res.data.datas;
    });
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style src='../assets/css/detail.css' scoped>
</style>
<style scoped>
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>